<template>
  <!-- 没有东西 -->
  <div v-if="userFlag" class="shop-car-nothing">
    <div class="car-header">
      <span class="iconfont icon-fanhui" @click="goback"></span>
      购物车
    </div>
    <div class="nothing">
      <div>
        <img
          src="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
        />
        <div>购物车空空如也,去逛逛吧~</div>
      </div>
    </div>
    <div class="go-to-app">
      <img
        src="https://img12.360buyimg.com/img/s694x148_jfs/t1/171999/12/22113/58222/61bad82eE0dcf6d31/d92d1e829bf953da.png"
      />
    </div>
  </div>
  <!-- 有东西 -->
  <div v-else class="shop-car">
    <div class="car-header">
      <span class="iconfont icon-fanhui" @click="goback"></span>
      购物车
    </div>
    <div class="shop-car-main">
      <van-swipe-cell v-for="item in ShopCarInfo" :key="item.gid">
        <van-card
          :num="item.buyNum"
          :price="item.goodsPrice"
          :title="item.goodsName"
          class="goods-card"
          :thumb="item.goodsImg"
        />
        <template #right>
          <van-button
            square
            text="删除商品"
            type="danger"
            class="delete-button"
            @click="deleteShopCar(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="shop-car-total">
      <van-submit-bar :price="totalPrice * 100" button-text="提交订单" />
    </div>
  </div>
</template>
<script>
import { searchShoppingCarByUser, delGoods } from "@axios/service";
import { Dialog } from "vant";
export default {
  data() {
    return {
      userFlag: false,
      ShopCarInfo: [],
      totalPrice: null,
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    async deleteShopCar(id) {
      var { data } = await delGoods({ id: id });
      Dialog({ message: data.message });
      this.setShopCarInfo();
    },
    async setShopCarInfo() {
      const obj = { user: this.lgc };
      const { data } = await searchShoppingCarByUser(obj);
      if (this.lgc && data.list.length) {
        this.userFlag = false;
        this.ShopCarInfo = data.list;
        this.totalPrice = 0;
        data.list.forEach((ele) => {
          this.totalPrice += ele.buyNum * ele.goodsPrice;
        });
      } else {
        this.userFlag = true;
      }
    },
  },
  mounted() {
    this.lgc = localStorage.getItem("lgc");
    console.log(this.lgc);
    this.setShopCarInfo();
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";

.shop-car {
  .car-header {
    .wh(375,44);
    background: #ffffff;
    position: relative;
    text-align: center;
    .fs(20);
    .lh(44);
    color: gray;
    .icon-fanhui {
      position: absolute;
      .left(10);
      .fs(22);
    }
  }
  .shop-car-main {
    .w(375 );
    .delete-button {
      height: 100%;
    }
  }
  /deep/.van-submit-bar {
    .wh(375,60);
  }
}
.shop-car-nothing {
  .wh(375,667);
  background: #f2f2f2;
  .car-header {
    .wh(375,44);
    background: #ffffff;
    position: relative;
    text-align: center;
    .fs(20);
    .lh(44);
    color: gray;
    .icon-fanhui {
      position: absolute;
      .left(10);
      .fs(22);
    }
  }
  .nothing {
    .wh(375,100);
    .mgau(100);
    img {
      .wh(90,90);
    }
    text-align: center;
    .lh(30);
    .fs(16);
    color: gray;
  }
  .go-to-app {
    img {
      .wh(347,74);
    }
  }
}
</style>
